<template>
  <a-card class="fromBox" title="资金使用申请">
    <template #extra>
      <a-tooltip placement="top">
        <template #title>
          <span>返回上级</span>
        </template>
        <a-button size="small" @click="getOut"> <RollbackOutlined /></a-button>
      </a-tooltip>
    </template>
    <div class="contentFromMent">
      <a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" labelWrap="true">
        <div>
          <h4 style="font-size: 17px; color: #478fca !important; font-weight: bolder">项目信息:</h4>
          <a-form-item label="项目编号" name="blprojectnum">
            <a-input v-model:value="formState.blprojectnum" placeholder="请填写" disabled style="color: black" />
          </a-form-item>
          <a-form-item label="项目名称" name="blapplyprojectname">
            <a-input v-model:value="formState.blapplyprojectname" placeholder="请填写" disabled style="color: black" />
          </a-form-item>
          <a-form-item label="申请日期" name="blapplytime">
            <a-input v-model:value="formState.blapplytime" placeholder="请填写" disabled style="width: 200px; color: black" />
          </a-form-item>
        </div>
        <div>
          <h4 style="font-size: 17px; color: #478fca !important; font-weight: bolder">申请人信息:</h4>
          <a-form-item label="联系人姓名" name="bllinkmanname">
            <a-input v-model:value="formState.bllinkmanname" placeholder="请填写" disabled style="color: black" />
          </a-form-item>
          <a-form-item label="执行单位" name="blname">
            <a-input v-model:value="formState.blname" placeholder="请填写" disabled style="color: black" />
          </a-form-item>
          <a-form-item label="电话" name="blphone">
            <a-input v-model:value="formState.blphone" placeholder="请填写" disabled style="color: black" />
          </a-form-item>
          <a-form-item label="邮箱" name="blemail">
            <a-input v-model:value="formState.blemail" placeholder="请填写" disabled style="color: black" />
          </a-form-item>
        </div>
        <div>
          <h4 style="font-size: 17px; color: #478fca !important; font-weight: bolder">申请事由:</h4>
          <a-form-item label="申请事由" name="blusecontent" :wrapper-col="{ span: 15, offset: 0 }">
            <a-textarea v-model:value="formState.blusecontent" :rows="4" placeholder="请填写" disabled style="color: black" />
          </a-form-item>
        </div>
        <div>
          <h4 style="font-size: 17px; color: #478fca !important; font-weight: bolder">项目进展:</h4>
          <a-form-item label="项目进展" name="blauditopinionm" :wrapper-col="{ span: 15, offset: 0 }">
            <a-textarea v-model:value="formState.blauditopinionm" :rows="4" placeholder="请填写" disabled style="color: black" />
          </a-form-item>
        </div>
        <div style="text-align: center">
          <h4 style="font-size: 22px; color: #478fca !important; font-weight: bolder; margin: 40px 80px 20px 0px">资金使用详细说明</h4>
        </div>
        <div>
          <h4 style="font-size: 17px; color: #478fca !important; font-weight: bolder" v-if="One">人员支出:</h4>
          <template v-for="(item, index) in TableListOne">
            <a-form-item :label="item.bldataname" v-if="item.bltotle">
              <a-input-number v-model:value="item.bltotle" placeholder="例:10.00" style="width: 100%; color: black" disabled :step="0.01" />
              <span style="height: 30px; line-height: 30px; display: block; margin: 10px 0">
                <a-input-number
                  v-model:value="item.blext3"
                  :step="0.01"
                  :min="0"
                  addon-after="元"
                  :placeholder="'请填写' + item.bldataname + '实际报销'"
                  style="width: 100%"
              /></span>
              <a-textarea v-model:value="item.bldetail" :rows="3" placeholder="备注" disabled style="color: black" />
            </a-form-item>
          </template>
        </div>
        <div>
          <h4 style="font-size: 17px; color: #478fca !important; font-weight: bolder" v-if="Two">公用支出:</h4>
          <template v-for="(item, index) in TableListTwo">
            <a-form-item :label="item.bldataname" v-if="item.bltotle">
              <a-input-number v-model:value="item.bltotle" placeholder="例:10.00" style="width: 100%; color: black" disabled :step="0.01" />
              <span style="height: 30px; line-height: 30px; display: block; margin: 10px 0">
                <a-input-number
                  v-model:value="item.blext3"
                  :step="0.01"
                  :min="0"
                  addon-after="元"
                  :placeholder="'请填写' + item.bldataname + '实际报销'"
                  style="width: 100%"
              /></span>
              <a-textarea v-model:value="item.bldetail" :rows="3" placeholder="备注" disabled style="color: black" />
            </a-form-item>
          </template>
        </div>
        <div>
          <h4 style="font-size: 17px; color: #478fca !important; font-weight: bolder" v-if="Three">基建支出:</h4>
          <template v-for="(item, index) in TableListThree">
            <a-form-item :label="item.bldataname" v-if="item.bltotle">
              <a-input-number v-model:value="item.bltotle" placeholder="例:10.00" style="width: 100%; color: black" disabled :step="0.01" />
              <span style="height: 30px; line-height: 30px; display: block; margin: 10px 0">
                <a-input-number
                  v-model:value="item.blext3"
                  :step="0.01"
                  :min="0"
                  addon-after="元"
                  :placeholder="'请填写' + item.bldataname + '实际报销'"
                  style="width: 100%"
              /></span>
              <a-textarea v-model:value="item.bldetail" :rows="3" placeholder="备注" disabled style="color: black" />
            </a-form-item>
          </template>
        </div>
        <div>
          <h4 style="font-size: 17px; color: #478fca !important; font-weight: bolder" v-if="Four">其他资本性支出:</h4>
          <template v-for="(item, index) in TableListFour">
            <a-form-item :label="item.bldataname" v-if="item.bltotle">
              <a-input-number v-model:value="item.bltotle" placeholder="例:10.00" style="width: 100%; color: black" disabled :step="0.01" />
              <span style="height: 30px; line-height: 30px; display: block; margin: 10px 0">
                <a-input-number
                  v-model:value="item.blext3"
                  :step="0.01"
                  :min="0"
                  addon-after="元"
                  :placeholder="'请填写' + item.bldataname + '实际报销'"
                  style="width: 100%"
              /></span>
              <a-textarea v-model:value="item.bldetail" :rows="3" placeholder="备注" disabled style="color: black" />
            </a-form-item>
          </template>
        </div>
      </a-form>
      <div style="text-align: center; padding: 40px 0">
        <a-space>
          <a-button @click="getUpdate" type="primary">提交 </a-button>
          <a-button @click="getOut"> <RollbackOutlined />返回 </a-button>
        </a-space>
      </div>
    </div>
  </a-card>
</template>
<script setup>
  import { reactive, ref, defineEmits, onMounted, toRaw, watch } from 'vue';
  import { message } from 'ant-design-vue';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { ProManageApi } from '../../../api/ProManage/ProManage-api';
  let formState = ref({});
  //表单数据
  const TableListOne = ref([]);
  const TableListTwo = ref([]);
  const TableListThree = ref([]);
  const TableListFour = ref([]);
  let blrecordVo = reactive([]); //总数组
  const One = ref(false);
  const Two = ref(false);
  const Three = ref(false);
  const Four = ref(false);
  async function getInitFrom() {
    try {
      let res = await ProManageApi.TableInite();
      TableListOne.value = res.data[0].children;
      TableListTwo.value = res.data[1].children;
      TableListThree.value = res.data[2].children;
      TableListFour.value = res.data[3].children;
      blrecordVo = [...TableListOne.value, ...TableListTwo.value, ...TableListThree.value, ...TableListFour.value];
      TableInite();
    } catch (error) {
      smartSentry.captureError(error);
    }
  }
  const props = defineProps({
    DateId: String,
  });
  const fromHoistry = ref();

  async function TableInite() {
    try {
      let blapplyid = props.DateId;
      let res = await ProManageApi.ProMangeHoistry(blapplyid);
      formState.value = res.blapply; //拿到表单
      fromHoistry.value = res.blapply.blrecordVo;
      // 创建一个 Map 查找出两个编号一样的
      const map1 = new Map(fromHoistry.value.map((item) => [item.bldatanum, item]));
      // 利用数组对象响应式，更新 合并后blrecordVo数组，就现对于更新了页面中循环的TableListOne two three four 数组
      blrecordVo.forEach((item) => {
        //将另个编号一样并且有值的数组，插入到blrecordVo数组中
        const match = map1.get(item.bldatanum);
        if (match) {
          item.bldetail = match.bldetail;
          item.bltotle = match.bltotle;
          item.blrecordid = match.blrecordid;
          item.blext2 = match.blext2;
        }
      });
      //以下方法必须写在这，因为以上one 等数据是处理过的，而下面方法是对处理过的数据起作用 (用来控制模块标题是否显示)
      One.value = TableListOne.value.some((item) => item.bltotle);
      Two.value = TableListTwo.value.some((item) => item.bltotle);
      Three.value = TableListThree.value.some((item) => item.bltotle);
      Four.value = TableListFour.value.some((item) => item.bltotle);
    } catch (error) {
      smartSentry.captureError(error);
    }
  }

  //表单验证规则
  const labelCol = {
    span: 5,
  };
  const wrapperCol = {
    span: 15,
  };
  const getUpdate = async () => {
    //将数组中不要的值剔除
    const filteredArray = blrecordVo.map(({ blbudgetdataid, bldatafunum, bldataname, children, ...rest }) => rest);
    // 过滤掉没有金额没有的数组对象
    const finalArray = filteredArray.filter((item) => item.blext3);
    console.log(finalArray, 'blrecordVo');
    ProManageApi.ActualFind(finalArray)
      .then((res) => {
        message.success('填写成功');
        getOut();
      })
      .catch((e) => {
        smartSentry.captureError(e);
      });
  };

  const emit = defineEmits();
  //返回表格
  const getOut = () => {
    let obj = {
      type: 0,
    };
    emit('getBlack', obj);
  };

  onMounted(() => {
    getInitFrom();
  });
</script>

<style lang="scss" scoped>
  .contentFromMent {
    width: 85%;
    min-height: 510px;
    padding-top: 40px;
    margin: 20px auto;
  }

  .steps-action {
    margin-top: 24px;
    float: right;
  }

  [data-theme='dark'] .steps-content {
    background-color: #2f2f2f;
    border: 1px dashed #404040;
  }
<<<<<<< HEAD
  .fromBox {
  }
=======

>>>>>>> yx
  .jianjie span {
    display: block;
    font-size: 16px;
    padding-bottom: 20px;
    padding-left: 20px;
  }
</style>
